<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
</head>
<body>
    <!-- 目前存在缺陷，当其中一类星星的动画结束后，会突然回到原点，造成断层的感觉 -->
    <p id=test>
        参考地址：
        <a href=https://juejin.im/post/6844903938932621325 target="_blank">
            【css3进阶】less实现星空动画
        </a>
    </p>
    <section>
        <section id=star1></section>
        <section id=star2></section>
        <section id=star3></section>
    </section>

    <script>
        // 浏览器宽度
        let windowWidth = 2000
        let star1 = document.getElementById('star1')
        let star2 = document.getElementById('star2')
        let star3 = document.getElementById('star3')
        let star1BS = ''
        let star2BS = ''
        let star3BS = ''
        console.log(star1.style.boxShadow)
        function boxShadowAdd(star, str, num){
            if(num > 0){
                let d1 = Math.round(Math.random() *  windowWidth)
                let d2 = Math.round(Math.random() *  windowWidth)
                // 此时的逗号处理比较重要，否则容易造成box-shadow的样式失效
                if(str === ''){
                    str += `${d1}px ${d2}px #FFF`
                } else {
                    str += `, ${d1}px ${d2}px #FFF`
                }
                star.style.boxShadow = str
                boxShadowAdd(star, str, num-1)
            }
        }
        boxShadowAdd(star1, star1BS, 700)
        boxShadowAdd(star2, star2BS, 200)
        boxShadowAdd(star3, star3BS, 100)
    </script>
</body>
</html>